import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import TimerEnhance from '@/utils/TimerEnhance';
import List from './components/List';
import AddOne from './components/AddOne';
import styles from './index.less';
import { Button, Tooltip } from 'antd';

@connect(({ jixieguanli_ziyounongji, loading }) => ({
  jixieguanli_ziyounongji,
  loading,
}))
@TimerEnhance
class Index extends Component {
  handleLoadList = () => {
    this.props.dispatch({
      type: 'jixieguanli_ziyounongji/getListEffect',
    });
  };

  // 退出页面重置数据
  handleResetData = () => {
    this.props.dispatch({
      type: 'jixieguanli_ziyounongji/resetDataReducer',
    });
  };


  componentDidMount() {
    this.handleLoadList();
  }

  componentWillUnmount() {
    this.handleResetData();
  }

  handlePressAddOne = () => {
    this.addOne.open();
  };

  // 添加一条新的记录
  handleAddOne = (info) => {
    // {machineName: "神牛拖拉机1", lengthOfUse: 100, repairCondition: "无维修状况"}
    this.props.dispatch({
      type: 'jixieguanli_ziyounongji/addOneRecordEffect',
      payload: {
        data: {
          machineName: info.machineName,
          lengthOfUse: info.lengthOfUse,
          repairCondition: info.repairCondition,
        },
      },
    });
  };

  handleDeleteOneRecord = (info) => {
    // {id: 1, machineName: "农机名1", lengthOfUse: 300, repairCondition: "这是农机1号的维修状况", time: "2019-03-02"}
    this.props.dispatch({
      type: 'jixieguanli_ziyounongji/deleteOneRecordEffect',
      payload: {
        data: {
          id: info.id,
        },
      },
    });
  };

  render() {
    const {
      jixieguanli_ziyounongji: {
        list,
      },
      loading,
    } = this.props;

    const listProps = {
      data: list,
      loading: loading.effects['jixieguanli_ziyounongji/getListEffect'],
      handleDelete: this.handleDeleteOneRecord,
    };

    const addOneProps = {
      handleSubmit: this.handleAddOne,
    };

    return (
      <div className={styles.container}>
        <AddOne
          {...addOneProps}
          wrappedComponentRef={(form) => this.addOne = form}
        />
        <List {...listProps} />
        <div className={styles.addOneWrapper}>
          <Tooltip placement="top" title="新增自有农机">
            <Button type="primary" shape="circle" icon="plus" size="large" onClick={this.handlePressAddOne} />
          </Tooltip>
        </div>
      </div>
    );
  }
}

export default Index;
